<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="审核中心">
        <div class="timeFreq">
          <!-- 考试筛选 -->
          <el-form :inline="true" :model="formInline" class="user-search">
            <el-form-item label="考试期次:">
              <el-input size="small"  placeholder="请输入" v-model="formInline.examAdministration.examPeriod"></el-input>
            </el-form-item>
            <el-form-item label="考试名称:">
              <el-input size="small"  placeholder="请输入" v-model="formInline.examAdministration.examName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary"  @click="search()">查询</el-button>
              <el-button size="small" type="primary"  @click="handleEdit()">重置</el-button>
            </el-form-item>
          </el-form>


          <!--          <examcard-->
          <!--            v-for="item in timeFreq"-->
          <!--            :key="item.id"-->
          <!--            :examContent="item"-->
          <!--            v-show="!showShade"-->
          <!--          ></examcard>-->
          <!--          <paper v-show="showShade"></paper>-->
        </div>

        <div>
          <!--列表-->
          <el-table size="small"
                    :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中"
                    :header-cell-style="headStyleFun"
                    style="width: 100%;">
            <el-table-column align="center" type="selection"  width="60">
            </el-table-column>
            <el-table-column sortable prop="id" label="序号" align="center" width="80">
            </el-table-column>
            <el-table-column sortable prop="examPeriod" label="考试期次" align="center" width="150">
            </el-table-column>
            <el-table-column sortable prop="examName" label="考试名称" align="center" width="180">
            </el-table-column>
            <el-table-column sortable prop="examQuizTime" label="考试时间" align="center" width="150">
            </el-table-column>
            <el-table-column sortable prop="examPersonNum" label="考生人数" align="center" width="100">
            </el-table-column>
            <el-table-column sortable prop="approvalTag" label="审批状态" align="center" width="100">
              <template slot-scope="scope">

                <el-tag type="success" v-if="scope.row.approvalTag == 1">
                  <div>{{scope.row.approvalTag == '1'?'已通过':'未通过'}}</div>
                </el-tag>
                <el-tag type="danger" v-else>
                  <div>{{scope.row.approvalTag == '1'?'已通过':'未通过'}}</div>
                </el-tag>
              </template>

            </el-table-column>


            <el-table-column align="center" label="操作" min-width="300" width="250">
              <template slot-scope="scope">

                <!-- 跳转index -->
                <router-link to="/review/index">
                <el-button size="mini" type="danger" @click="handleEdit(scope.row)">审批</el-button>
                </router-link>

                <!-- 跳转list -->
                <router-link to="/review/list">
                <el-button size="mini" @click="handle(scope.$index, scope.row)">详情</el-button>
                </router-link>

              </template>
            </el-table-column>
          </el-table>
        </div>


        <div>
          <!-- 编辑界面 -->
          <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog("edit")'>
            <el-form label-width="100px" ref="editForm" :model="editForm" >
              <el-form-item label="考试期次" prop="examPeriod">
                <el-input size="small" v-model="editForm.examPeriod" auto-complete="off" placeholder="请输入考试期次"></el-input>
              </el-form-item>
              <el-form-item label="考试名称" prop="examName">
                <el-input size="small" v-model="editForm.examName" auto-complete="off" placeholder="请输入姓名"></el-input>
              </el-form-item>


              <el-form-item label="考试时间" prop="examQuizTime">
                <el-input size="small" v-model="editForm.examQuizTime" auto-complete="off" placeholder="请输入考试时间"></el-input>
              </el-form-item>
              <el-form-item label="考生人数" prop="examPersonNum">
                <el-input size="small" v-model="editForm.examPersonNum" auto-complete="off" placeholder="请输入考生人数"></el-input>
              </el-form-item>
              <el-form-item label="审批状态" prop="approvalTag">
                <el-switch
                    style="display: block;margin-top:9px"
                    v-model="editForm.approvalTag"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="可用"
                    inactive-text="禁用"
                    active-value="1"
                    inactive-value="2">

                </el-switch>

              </el-form-item>


            </el-form>

          </el-dialog>
        </div>
        <div>
          <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                v-bind:child-msg="pageparm"
                @current-change="handleCurrentChange"
                :current-page="pageparm.currentPage"
                :page-sizes="[1, 5, 10, 15]"
                :page-size="pageparm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageparm.total" style="margin-left:200px;margin-top:16px">
            </el-pagination>
          </div>
        </div>

      </el-tab-pane>

    </el-tabs>
  </div>

</template>

<script>
import examcard from "@c/examCard";
import paper from "@c/paper";
import qs from "qs";

export default {

  methods: {

    getdata() {
      // this.loading = true

      this.$axios.post('http://localhost:8080/reviewAdministration/selectPage/', this.formInline
      ).then(
          res => {
            console.log("Exam对象后端数据》查询", res)
            console.log("Exam对象后端数据", res.data.data)
            this.listData = res.data.data.list
            this.pageparm.total = res.data.data.total


            this.pageparm.currentPage = res.data.data.pageNum;
            this.pageparm.pageSize = res.data.data.pageSize
            //初始化分页组件显示的总页数
            console.log("Exam对象后端数据》查询", res)
            console.log("Exam对象后端数据", res.data.data.total)
            this.handleCurrentChange.total = res.data.data.total

          })
    },

    //详情页面用
    handle(index,row) {
      // this.formInline.id=row.id,

          console.log("row.id",row.id),
          this.$router.push({path:"/review/list", query:{id:row.id}})
    },

    //设置表头颜色
    headStyleFun({row, rowIndex}){
      return 'background-color: #F5F5F5;border-bottom: 1px solid rgb(28, 202, 213);'
    },

    //分页用
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.formInline.limit =val
      this.formInline.page = 1
      this.getdata(this.formInline)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.formInline.page = val
      this.getdata(this.formInline)
    }
  },

  name: "index",
  components: {
    examcard,
    paper,
  },
  data() {

    return {

      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      title: '添加用户',
      editFormVisible: false, //控制编辑页面显示与隐藏
      dataAccessshow: false, //控制数据权限显示与隐藏
      unitAccessshow: false, //控制所属单位隐藏与显示


      formInline: {
        page: 1,
        limit: 5,
        examAdministration:{
          examPeriod: '',
          examName: '',

          // examQuizTime: '',
          // examPersonNum: '',
          // approvalTag: '',
          // examExamine: '',
        },

        // token: localStorage.getItem('logintoken')
      },

      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 5,
        total: 20,
      },

      //跳转审批管理
      handleEdit(row) {

        this.$router.push({path:"/review/index", query:{id:row.id}})


        // this.editForm.id=row.id,

        // console.log(row.id)
      },

      //排序用
      radio: '1',
      radio1: '3',

      //考试查询与重置用
      input6: '',
      input7: '',

      // 编辑与详情
      editForm: {
        id: '',
        examPeriod: '',
        examName: '',
        examQuizTime: '',
        examPersonNum: '',
        approvalTag: '1',
        examExamine: '1',
        // token: localStorage.getItem('logintoken')
      },

      //基本信息用
      listData1: [{
        a:'aaa',
        b:'bbb'
      }],

      //试卷信息用
      listData2: [{

      }],

      listData: [


      ],

      // timeFreq: [
      //   { title: "章节1", time: "2020年5月23日16:33:56", dura: "60min" },
      //   { title: "章节2", time: "2020年5月23日16:33:56", dura: "60min" },
      //   { title: "章节3", time: "2020年5月23日16:33:56", dura: "60min" },
      //   { title: "章节4", time: "2020年5月23日16:33:56", dura: "60min" },
      //   { title: "章节5", time: "2020年5月23日16:33:56", dura: "60min" },
      // ],
      dutyRule: [
        { title: "章节331", time: "2020年5月23日16:33:56", dura: "60min" },
        { title: "章节212", time: "2020年5月23日16:33:56", dura: "60min" },
        { title: "章节3", time: "2020年5月23日16:33:56", dura: "60min" },
      ],
      falutHand: [
        { title: "章节1", time: "2020年5月23日16:33:56", dura: "60min" },
        { title: "章节25", time: "2020年5月23日16:33:56", dura: "60min" },
        { title: "章节3", time: "2020年5月23日16:33:56", dura: "60min" },
      ],



      // 导入事件
      search() {
        console.log('formInline',this.formInline);
        console.log('this.pageparm',this.pageparm);
        this.formInline.page = this.pageparm.currentPage;
        this.formInline.limit = this.pageparm.pageSize;
        this.getdata()
      },


      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4

    };
  },

  created() {
    this.getdata();
  },

  computed: {
    showShade() {
      return this.$store.state.settings.onShade;
    },

  },
};
</script>

<style scoped lang="scss">
.timeFreq {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.dutyRule {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.falutHand {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
